<!DOCTYPE html>
<html>

<head>
  <style>
    body {
      font-family: 'Arial', sans-serif;
      color: #101828;
      background-color: #e9ebf0;
      margin: 0;
      padding: 0;
    }

    .container {
      width: 600px;
      margin: 80px auto 0 auto;
      padding: 36px 48px 52px 48px;
      background-color: #fcfcfd;
      border-radius: 16px;
      border: 1px solid #ffffff;
      box-shadow: 0 3px 10px -2px rgba(9, 9, 11, 0.08), 0 2px 4px -2px rgba(9, 9, 11, 0.06);
    }

    .header {
      margin-bottom: 40px;
    }

    .header img {
      max-width: 100px;
      height: auto;
    }

    .title {
      margin-bottom: 32px;
      font-weight: 600;
      font-size: 24px;
      line-height: 1.2;
      color: #101828;
    }

    .description {
      margin-top: 0;
      margin-bottom: 12px;
      font-size: 14px;
      line-height: 20px;
      color: #676f83;
    }

    .code-content {
      padding: 16px 32px;
      text-align: center;
      border-radius: 16px;
      background-color: #f2f4f7;
      margin: 16px auto;
    }

    .code {
      line-height: 36px;
      font-weight: 700;
      font-size: 30px;
    }

    .button {
      display: block;
      background: #2563eb;
      color: #fff !important;
      text-decoration: none;
      font-weight: 600;
      border-radius: 10px;
      border: 0.5px solid rgba(16, 24, 40, 0.04);
      height: 36px;
      line-height: 36px;
      text-align: center;
      font-size: 14px;
      margin-top: 12px;
      margin-bottom: 20px;
      box-shadow: 0 -6px 12px -4px rgba(9, 9, 11, 0.08) inset, 0 0 1px 0 rgba(255, 255, 255, 0.16) inset, 0 0.5px 0 0 rgba(255, 255, 255, 0.08) inset, 0 2px 2px -1px rgba(0, 0, 0, 0.12), 0 1px 1px -1px rgba(0, 0, 0, 0.12), 0 0 0 0.5px rgba(9, 9, 11, 0.05);
    }

    .reset-btn {
      color: #155AEF;
      text-decoration: none;
      font-weight: 500;
    }

    .support {
      color: #155AEF;
      text-decoration: none;
    }

    .support:hover {
      text-decoration: underline;
    }

    .tip {
      margin-top: 20px;
      color: #676F83;
      text-align: center;
      font-size: 12px;
      font-weight: 400;
      line-height: 16px;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="header">
      <!-- Optional: Add a logo or a header image here -->
      <img src="https://assets.dify.ai/images/logo.png" alt="Dify Logo" />
    </div>
    <p class="title">It looks like you’re resetting a password with an unregistered email</p>
    <p class="description">Hi, </p>
    <p class="description">
      We noticed you tried to reset your password, but this email is not associated with any account.

      Please sign up here: </p>
    <a href="{{ sign_up_url }}" class="button">Sign Up</a>
    <p class="description">If you didn’t request this action, you can safely ignore this email.</p>
  </div>
  <div class="tip">Please do not reply directly to this email, it is automatically sent by the system.</div>
</body>

</html>